<template>
  <div class="input-effect-box">
    <div class='input-box'>
      <input type='text' required />
      <span>用户名</span>
    </div>
    <div class='input-box'>
      <input type='password' required />
      <span>密码</span>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style scoped lang="less">
.input-effect-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  gap: 30px; //设置flex布局中的元素间隔
  background: #1d2b3a;

  .input-box {
    position: relative;
    width: 250px;

    input {
      width: 100%;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: #1d2b3a;
      border-radius: 5px;
      outline: none;
      color: #ffffff;
      font-size: 1em;
      transition: 0.5s;
    }

    span {
      position: absolute;
      left: 0;
      padding: 10px;
      pointer-events: none;
      font-size: 1em;
      color: rgba(255, 255, 255, 0.25);
      transition: 0.5s;
    }

    input:valid~span,
    input:focus~span {
      color: #00dfc4;
      transform: translateX(10px) translateY(-7px);
      font-size: 0.65em;
      padding: 0 10px;
      background: #1d2b3a;
      border-left: 1px solid #00dfc4;
      border-right: 1px solid #00dfc4;
      letter-spacing: 0.2em;
    }

    &:nth-child(2) {

      input:valid~span,
      input:focus~span {
        background: #00dfc4;
        color: #1d2b3a;
        border-radius: 2px;
      }
    }

    input:valid,
    input:focus {
      border: 1px solid #00dfc4;
    }
  }

}
</style>